<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>

  </style>
</head>
<body>
<div class="icon-style">icon</div>
<video></video>
<script type="module">
  var video = document.getElementsByTagName('video')[0];

  navigator.mediaDevices.getUserMedia({ video: true, audio: false })
    .then(mediaStream => {
      video.srcObject = mediaStream;
      video.oncanplay = () => {
        video.play();
      };
    })
    .catch(err => {
      console.log(err);
      alert('对不起，无法获取您的摄像头！');
    });
</script>
<script>
  var video = document.getElementsByTagName('video')[0];
  video.oncanplay = () => video.play();

  var mediaSource = new MediaSource();
  var obj_url = URL.createObjectURL(mediaSource);
  video.src = obj_url; // blob:http://127.0.0.1:5500/629075b2-e0e2-4ebb-96a7-37a1d0ebed2c
  var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

  mediaSource.addEventListener('sourceopen', () => {
    var sourceBuffer = mediaSource.addSourceBuffer(`video/mp4; codecs="avc1.42E01E, mp4a.40.2"`);

    fetch(`https://nickdesaulniers.github.io/netfix/demo/frag_bunny.mp4`)
      .then(async resp => {
        var reader = resp.body.getReader();

        sourceBuffer.onupdateend = async () => {
          console.log(mediaSource.readyState); // open
          const { done, value } = await reader.read();
          if (done) {
            return;
          }
          sourceBuffer.appendBuffer(value);
        }

        sourceBuffer.onupdateend();
      });
  });
</script>
</body>
</html>
